<!--新页面模板-->
<template>
  <!--  边坡技术评定记录-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <technical-check-list-new  ref="technicalNew"></technical-check-list-new>
<!--          <el-tabs type="border-card"  v-model="activeName">-->
<!--&lt;!&ndash;            <el-tab-pane label="旧表单" name="technicalOld">&ndash;&gt;-->
<!--&lt;!&ndash;              <technical-check-list-old ref="technicalOld"></technical-check-list-old>&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--            <el-tab-pane label="技术评定 " name="technicalNew">-->
<!--            -->
<!--            </el-tab-pane>-->
<!--          </el-tabs>-->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import OrganizationTree from '@/components/organization-tree/all'
  // import technicalCheckListOld from "./technicalCheckListOld";
  import technicalCheckListNew from "./technicalCheckListNew";
  import ItemMixins from "../item.mixins";
  import {getTechnicalDetail, getTechnicalFormList, technicalDelete} from '@/services/model/form';
  import Enums from '@/utils/enums'

  export default {
    components: {
      // technicalCheckListOld,
      OrganizationTree,
      technicalCheckListNew
    },
    mixins: [ItemMixins,Enums],
    data() {
      return {
        restaurants: [],
        activeName:'technicalNew',
        state: '',
        timeout: null,
        isDisabled: true,
        drawerKey: 1,
        showDetailTitle: '',
        newForm: false,
        isLook: true,
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
        tableList: [],
        currentRow: {
          formList: []
        },
        form: {
          page: 1,
          pageSize: 12,
          roadSectionId: '',
          startCreateTime: null,
          endCreateTime: null,
          isQueryHistory: 0,
        },
        showDetail: false,
        EnumTechniqueTypeList: [],
      }
    },
    watch: {},
    computed: {},
    mounted() {
      this.queryDictList(['EnumTechniqueType'], ['EnumTechniqueTypeList'])
    },
    methods: {
      disableds(value) {
        this.isDisabled = value
      },
      async handleDelete(id) {
        let res = await technicalDelete({id: id})
        if (res.code === 200) {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '删除成功'
          })
        }
        this.queryList()
      },
      getSlopeList() {
        if (!this.form.roadId) {
          this.$message('请先选择路线');
          return
        }
      },
      submitClose() {
        this.drawerKey += 1
        this.newForm = false
        this.queryList()
      },
      submitDrawer() {
        this.$refs.technicalForm.validatorForm()
      },
      submit() {
        this.currentRow = {};
        this.showDetail = false
        this.queryList()
      },
      changeRoad() {
        this.$set(this.form, 'slopeId', '');
        const {deptTreeId, roadId} = this.form
        this.getSelectSlopeList(deptTreeId, roadId)
      },
      //面包屑跳转
      breadClick(deptTreeId) {
        this.$refs.deptTree.changeBread(deptTreeId)
      },
      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.$set(this.form, 'roadId', '');
        this.$set(this.form, 'slopeId', '');
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.$refs.technicalNew.selectOrgHandel(this.deptTree.deptTreeId)
        this.queryList()
        this.changeDept()
      },
      async editDetail(row) {
        // return
        this.showDetail = true
        this.showDetailTitle = '编辑边坡技术状况评定表'
        this.isLook = false
        let detail = await getTechnicalDetail({id: row.id})
        this.currentRow = detail.data
      },
      async checkDetail(row) {
        this.showDetail = true
        this.showDetailTitle = '查看边坡技术状况评定详情'
        this.isLook = true
        let detail = await getTechnicalDetail({id: row.id})
        this.currentRow = detail.data
      },
      // 获取当前的序号
      getIndex(index) {
        let param = (this.form.page - 1) * this.form.pageSize + index + 1
        return param
      },
      async queryList() {
        return
        let res = await getTechnicalFormList(this.form)
        this.tableList = res.data?.records || []
        this.form.page = Number(res.data?.current)
        this.form.total = Number(res.data?.total)


      },
      // 分页大小改变
      handleSizeChange(val) {
        this.form.pageSize = val
        this.queryList()
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.form.page = val
        this.queryList()
      },
      //获取路线列表
      async changeDept() {
        this.getRoadListByDept(this.form.deptTreeId)
      },
    },
  }


</script>
<style scoped="scoped" lang="less">

  .box-view {
    .left_org {
      height: calc(100% - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 0px 20px;
      }
    }
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .demo-drawer__content {
    padding-right: 30px;
    height: 75%;
    overflow: auto;
  }

  .demo-drawer__footer {
    bottom: 2%;
  }

  /deep/ .demo-drawer__content1 {
    width: 100%;
    overflow: auto;
  }

</style>
